<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1>数据：{{count}}</h1>
    <h1>计算属性：{{DouCount}}</h1>
    <button @click="plus">加1</button>
  </div>
</template>

<script lang="ts">
import {ref,computed,reactive,toRefs} from 'vue'
// ref 能创建一个响应式的数据
// reactive 参数是一个对象 创建响应式的数据和方法等
// lang="ts"
interface ProInter{
  count:number,
  plus():void,
  DouCount:number
}
export default {
      setup() {
          let dataPros:ProInter=reactive({
            count:0, //数据
            plus:()=>{//方法
              dataPros.count++
            },
            DouCount:computed(()=>{//计算属性
              return dataPros.count*2
            })
          })
        // toRefs 将数据 转为响应式数据
        let mydata=toRefs(dataPros)
          return {
              ...mydata
          }
      }
}
</script>
<style lang="less">
  
</style>
